<template>
	<div>
		<a-modal v-model:visible="modalVisible" title="退款服务信息" width="80%" @cancel="cancle">
			<a-descriptions bordered :column="2">
				<a-descriptions-item label="订单状态">{{ 
						orderStatus(order.status)
					}}</a-descriptions-item>
				<a-descriptions-item label="订单号">
					{{ order.number }}
					<a-button type="link" @click="search">查看</a-button>
				</a-descriptions-item>
				<a-descriptions-item label="申请时间">{{ order.createdAt }}</a-descriptions-item>
				<a-descriptions-item label="申请人">{{ order.name }}</a-descriptions-item>
				<a-descriptions-item label="申请退款金额">{{ order.price }}</a-descriptions-item>
				<a-descriptions-item label="实际退款金额">{{ order.endPrice }}</a-descriptions-item>
				<a-descriptions-item label="退款方式">{{ order.way }}</a-descriptions-item><a-descriptions-item
					label=""></a-descriptions-item>
				<a-descriptions-item label="退款原因" style="width: 160px;">{{ order.cause }}</a-descriptions-item>
			</a-descriptions>
			<template #footer>
				<div style="padding: 20px 0px">
					<a-row v-if="isEdit">
						<a-col :span="4" :offset="6"><a-button type="primary" @click="confirm">确认退款</a-button></a-col>
						<a-col :span="4" :offset="2"><a-button type="danger" @click="reject">拒绝退款</a-button></a-col>
					</a-row>
					<a-row v-else>
						<a-col :span="4" :offset="8">
							<a-button type="primary" @click="cancle">关闭</a-button>
						</a-col>
					</a-row>
				</div>
			</template>
		</a-modal>
		<!--拒绝退款弹窗 -->
		<a-modal v-if="visible1" v-model:visible="visible1" title="拒绝原因" @ok="rejectRefund" width="50%">
			<a-form :model="form" ref="formRef" :rules="rules">
				<a-form-item label="请输入退款原因" name="reason">
					<a-textarea v-model:value="form.reason" placeholder="请输入退款原因"
						:auto-size="{ minRows: 2, maxRows: 5 }" />
				</a-form-item>
			</a-form>
		</a-modal>
		<!--部分退款金额 -->
		<a-modal v-if="visible3" v-model:visible="visible3" title="部分退款" @ok="beforeconfirm()" width="50%">
			<a-form :model="form" ref="formRef1" :rules="rules1">
				<a-form-item label="退款金额" name="endPrice">
					<a-input v-model:value="form.endPrice" :placeholder="'最多输入' + order.payPrice" />
				</a-form-item>
				<block v-if="order.institution == '爱谱蒂康'">
					<a-form-item label="扣款原因">
						<a-select ref="select" v-model:value="form.aiPuDiKangRefundDetail" @focus="focus"
							@change="handleChange" placeholder="请选择扣款原因" allowClear>
							<a-select-option v-for="item in manageRefundOptions" :value="item.id"
								:key="item.id">{{ item.name }}</a-select-option>
						</a-select>
					</a-form-item>
				</block>
			</a-form>
		</a-modal>
		<!-- 全退和部分退 -->
		<a-modal v-if="visible2" v-model:visible="visible2" title="确认退款吗？" width="50%">
			<a-form :model="form" ref="formRef"> 退款金额将会原路返回到申请者账户！ </a-form>
			<template #footer>
				<a-row>
					<a-col :span="4" :offset="6"><a-button type="primary" @click="confirm1(0)">全额退款</a-button></a-col>
					<a-col :span="4" :offset="2"><a-button type="danger"
							@click="beforeconfirm1(1)">部分退款</a-button></a-col>
				</a-row>
			</template>
		</a-modal>
	</div>
</template>
<script>
	import {
		Modal,
		message
	} from 'ant-design-vue'
	import {
		ref,
		h,
		reactive,
		onMounted,
		createVNode,
		toRefs,
		computed
	} from 'vue'
	import {
		ExclamationCircleOutlined
	} from '@ant-design/icons-vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		ProcessCancelOrder,
		selectOneRefundOrder,
		confirmRefund
	} from '@/api/order/index'
	import { useModal } from "@/hooks"
	export default {
		components: {
			ExclamationCircleOutlined
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			number: {
				type: Number,
				default: ''
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			status: {
				type: Boolean,
				default: ''
			}
		},
		setup(props, {
			emit,
			attrs
		}) {
			console.log(props, '接收的参数')
			const router = useRouter()
			const visible1 = ref(false)
			const form = reactive({})
			const formRef = ref('')
			const formRef1 = ref('')
			// const visible = ref(false)
			const modalVisible = computed({
				get: () => props.visible,
				set: val => {
					emit('update:visible', val)
				}
			})
			const data = reactive({
				order: {},
				visible2: false,
				visible3: false
			})
			const rules = {
				reason: [{
					required: true,
					trigger: 'blur',
					message: '请输入退款原因！！！'
				}]
			}
			const rules1 = {
				endPrice: [{
					required: true,
					trigger: 'blur',
					message: '请输入退款金额！！！'
				}]
			}
			const manageRefundOptions = reactive([{
					name: '服务预约当天取消且服务人员未上门的（应扣除30%）',
					id: '服务预约当天取消且服务人员未上门的（应扣除30%）'
				},
				{
					name: '服务人员已上门，因客户身体原因无法服务的（应扣除50%）',
					id: '服务人员已上门，因客户身体原因无法服务的（应扣除50%）'
				},
				{
					name: '服务人员已上门，因甲方原因要取消服务的（应扣除70%）',
					id: '服务人员已上门，因甲方原因要取消服务的（应扣除70%）'
				}
			])
			const cancle = () => {
				emit('closeModal')
			}
			const confirm = () => {
				data.visible2 = true
			}
			const beforeconfirm1 = () => {
				data.visible3 = true
				form.value = {}
			}
			const handleChange = value => {
				form.aiPuDiKangRefundDetail = value
				console.log(form.aiPuDiKangRefundDetail)
			}
			const beforeconfirm = async () => {
				formRef1.value.validate().then(async () => {
					// debugger;
					if (form.endPrice > data.order.payPrice) {
						message.error('退款金额应小于支付金额')
						return
					}
					if (data.order.institution == '爱谱蒂康') {
						if (form.aiPuDiKangRefundDetail == '' || form.aiPuDiKangRefundDetail ==
							undefined) {
							message.error('请选择扣款原因')
							return
						}
					}

					let data1 = {
						number: props.number,
						status: 7,
						refundType: 1,
						endPrice: form.endPrice,
						aiPuDiKangRefundDetail: form.aiPuDiKangRefundDetail
					}
					console.log('', data1)
					let res = await confirmRefund(data1)
					if (res.success) {
						message.success('退款成功')
						visible1.value = false
						data.visible3 = false
						data.visible2 = false
						cancle()
					} else {
						message.error('退款失败')
					}
				})
			}
			const confirm1 = val => {
				const {closeModal} = useModal.confirm({
					title: '确定确认退款吗?',
					icon: createVNode(ExclamationCircleOutlined),
					onOk: async () => {
						let data = {
							number: props.number,
							status: 7,
							refundType: val,
							aiPuDiKangRefundDetail: ''
						}
						let res = await confirmRefund(data)
						if (res.success) {
							message.success('退款成功')
							visible1.value = false
							cancle()
							closeModal()
						} else {
							message.error('退款失败')
						}
					},
					
				})
			}

			const reject = () => {
				form.value = {}
				visible1.value = true
			}
			const handleOk = () => {
				visible1.value = false
			}
			const rejectRefund = () => {
				formRef.value.validate().then(async () => {
					let data = {
						content: form.reason,
						number: props.number,
						status: 10
					}
					let res = await ProcessCancelOrder(data)
					if (res.success) {
						message.success('拒绝退款成功')
						visible1.value = false
						cancle()
					} else {
						message.error('操作失败')
					}
				})
			}
			const orderStatus = (status) => {
      let title = "";
      switch (status) {
        case 9:
          title = "待审核";
          break;
        case 7:
          title = "已退款";
          break;
        case 10:
          title = "已拒绝";
          break;
      }
      return title;
    };
			const search = () => {
				emit('closeModal')
				router.push({
					path: '/order/center/order-detail',
					query: {
						isEdit: 0,
						number: data.order.number
					}
				})
			}
			initDetail()
			async function initDetail() {
				let res = await selectOneRefundOrder(props.number)
				if (res.success) {
					data.order = res.object
					form.aiPuDiKangRefundDetail = ''
				}
			}
			onMounted(() => {})
			return {
				...toRefs(data),
				form,
				formRef,
				formRef1,
				cancle,
				confirm,
				confirm1,
				beforeconfirm1,
				beforeconfirm,
				orderStatus,
				rules,
				rules1,
				reject,
				visible1,
				handleOk,
				rejectRefund,
				search,
				manageRefundOptions,
				handleChange,
				modalVisible
			}
		}
	}
</script>